<template>
  <div id="app">
    <h3>vuex数据共享</h3>
    根数据：{{$store.state.age}}
    根计算属性：{{$store.getters.myAge}}<br>
    <button @click="change">更改</button>
    <button @click="mapMutationsChange">mapMutations更改</button>
    <!-- <button @click="$store.state.age=100">不建议</button> -->
    <hr>
    
    动态加载模块取值：{{$store.state.d ? $store.state.d.age : 'wu'}}<br>
    <button @click="aChange">异步更改</button>
    <hr>
    命名空间a模块里的数据： {{$store.state.a.name}}  {{$store.state.a.age1}}<br>
    <button @click="change1">a模块里的mutations方法</button>
    <hr />
    a模块中嵌套的c模块数据：{{$store.state.a.c.age2}}<br>
    <button @click="$store.commit('a/c/changeAge', 10)">a模块中嵌套的c模块mutations方法</button>
    <br>
    多层嵌套模块取值a.c.d：{{$store.state.a.c.d.age3}}<br>
    <hr />
    <button @click="registerModule">动态注册模块</button>
    e模块动态注册后取值： {{ $store.state.e && $store.state.e.name }}<br>
    多层嵌套动态注册取值a.g：{{$store.state.a.g && $store.state.a.g.name}}<br>
    <hr />
    b模块动态注册后取值： {{ $store.state.b && $store.state.b.name }} 
    {{ $store.state.b && $store.state.b.age }}<br>
    {{ $store.getters.bAge }}
  </div>
</template>

<script>
//映射函数，辅助函数
import {mapMutations,mapState,mapGetters,mapActions} from './vuex';//用法一样，只是简化了
//可以拿到命名空间里的
import {createNamespacedHelpers} from 'vuex';
let {mapState,mapGetters} = createNamespacedHelpers('a');
console.log(mapState(['age']))

export default {
  name:'app',
  mounted(){
    //嵌套模块中的getters这样取值
    console.log(this.$store.getters['a/c/profile'])
  },
  methods:{
    //映射函数，辅助函数
    ...mapMutations(['syncChange']),//传数组
    //...mapMutations({aaa:'syncChange'}),//传对象，可以改名字
    ...mapState(['age']),//用法一样，只是简化了
    ...mapGetters(['myAge']),
    ...mapActions(['asyncChange']),
    
    //1 通过mutation提交修改状态
    change(){
      this.$store.commit('syncChange',10)
    },
    //2 异步通过调用actions里的方法还是调用mutation来修改状态
    aChange(){
      this.$store.dispatch('asyncChange',5)
      // this.asyncChange('abc')
    },
    //3 通过映射使用，简化操作
    mapMutationsChange(){
      //当使用mapMutations时，将组件中的 methods 映射为 store.commit 调用
      this.syncChange(12)
      //this.aaa(12)//改名字的用法
    },
    //4 动态注册vuex模块
    registerModule(){
      this.$store.registerModule('e',{
        state:{
          name:'e100'
        }
      })
      //动态注册多层嵌套
      this.$store.registerModule(['a','g'],{
        state:{
          name:'g100'
        }
      })
      this.$store.registerModule("b",{
        state:{
          name:'abc',
          age:30
        },
        getters:{
          bAge(state){
            return state.age+1
          }
        }
      })
    },
    //5 使用命名空间
    change1(){
      //路径前加 空间名和斜杠
      this.$store.commit('a/syncChange',100)
      //父级a也有namespaced: true，嵌套的路径要写完整，父级没有，可以直接写c/
      //this.$store.commit('a/c/syncChange',100)
    },
  }
}
</script>

<style>

</style>